<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="800px" @open="open" @close="close">
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="disableEditSubmit">
      <el-row>
        <el-col :span="24">
          <el-form-item label="授权区域" prop="arealevelcode" :rules="rules.validateRequire">
            <ref-area-group :singleSelect="true" v-model="model.arealevelcode" @confirm="confirmSelectArea" :initDisplayData.sync="model.areaname"></ref-area-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="级别" prop="arealevel" :rules="rules.validateRequire">
            <el-select v-model="model.arealevel" disabled filterable clearable>
              <el-option v-for="item in codeModel.arealevelList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="授权人" prop="usercodes" :rules="rules.validateRequire">
            <tl-ref-user v-model="model.usercodes" :initDisplayData.sync="model.usernames" dataType="code" :singleSelect="false"></tl-ref-user>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="授权部门" prop="deptcommoncode" :rules="rules.validateRequire">
            <el-select v-model="model.deptcommoncode" filterable clearable :disabled="!isOperator">
              <el-option v-for="item in codeModel.notProvinceDeptcommoncodeList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="description">
            <el-input v-model="model.description" type="textarea" :rows="4"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="有效" prop="enabled">
            <el-radio-group v-model="model.enabled">
              <el-radio :label="parseInt(item.code)" v-for="item in codeModel.enabledList" :key="item.code">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="disableEditSubmit === false">确认</el-button>
    </div>
    <ref-area-list ref="reflist" @confirm="assignUpperArea"></ref-area-list>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from "@tapui/mixins/mixin_edit"
/** 子组件 */
import refAreaGroup from "@/views/mms/mmsDeptProvinceCityMatchInfo/refAreaGroup"
import refAreaList from "@/views/mms/mmsDeptProvinceCityMatchInfo/refList"
import { OPERATOR_ROLE } from "@/const/const"
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from "@tapui/utils/http"
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  components: { refAreaGroup, refAreaList },
  data() {
    return {
      moduleTitle: "部门地市信息表",
      urlPrefix: "/mms/deptProvinceCityMatchInfo/",
      url: {
        // 额外的url
        queryDataUrl: "/mms/deptProvinceCityMatchInfo/list",
        queryProvinceCityMatchInfo: "/mms/deptProvinceCityMatchInfo/queryProvinceCityInfoByID",
        queryDeptcommoncode: "/mms/provinceCityMatchinfo/queryDeptcommoncode"
        // queryTreeUrl: "/mms/deptProvinceCityMatchInfo/queryParentTreeList"
      },
      userDeptcommoncode: ""
    }
  },
  computed: {
    isOperator() {
      let rolelist = this.$store.getters.roles
      let opRole = rolelist.filter(role => {
        return role === OPERATOR_ROLE
      })
      return opRole.length > 0
    }
  },
  methods: {
    loaded() {
      // 消除异常校验
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      getAction(this.url.queryDeptcommoncode, {}).then(res => {
        if (res.success) {
          let deptcommoncode = res.result.deptcommoncode
          let exist = this.codeModel.notProvinceDeptcommoncodeList.filter(item => {
            return item.code === deptcommoncode
          })
          if (exist.length > 0) {
            this.$set(this.model, "deptcommoncode", res.result.deptcommoncode)
          } else {
            this.$set(this.model, "deptcommoncode", "")
          }
        }
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      })
    },
    openRefDialog() {
      this.$refs.reflist.visible = true
    },
    assignUpperArea(selectedRows, selectedKeys) {
      this.$set(this.model, "parentid", selectedRows.id)
      this.$set(this.model, "upperarealevelcode", selectedRows.arealevelcode)
      this.$set(this.model, "upperareaname", selectedRows.areaname)
    },
    assignDefaultValue() {
      let id = this.model.parentid
      getAction(this.url.queryProvinceCityMatchInfo, { id }).then(res => {
        if (res.success) {
          this.$set(this.model, "arealevelcode", res.result.levelcode)
          this.$set(this.model, "arealevel", res.result.arealevel)
        } else {
          this.$tap.alert(res.message)
        }
      })
    },
    confirmSelectArea(datas) {
      let data = datas[0]
      let id = data.id
      getAction(this.url.queryProvinceCityMatchInfo, { id }).then(res => {
        if (res.success) {
          this.$set(this.model, "arealevelcode", res.result.levelcode)
          this.$set(this.model, "arealevel", res.result.arealevel)
        } else {
          this.$tap.alert(res.message)
        }
      })
      this.$set(this.model, "areaname", data.name)
      this.$set(this.model, "parentid", data.id)
      //
    }
  }
}
</script>
<style lang="scss" scoped>
.el-input /deep/ .el-input-group__append {
  background-color: var(--tap-main-color, var(--default-color, #0a966e));
  border: 1px solid var(--tap-main-color, var(--default-color, #0a966e));
  color: rgb(255, 255, 255);
}
</style>
